<template>
  <el-row v-for="(item, index) in props.messageList" :key="index" class="bg-hover p-1 mb-2">
    <el-col :span="24">
      <el-row>
        <el-col :span="5"><el-avatar :src="uiData.defaultAvatar" :size="42" /></el-col>
        <el-col :span="19">
          <el-row>
            <el-col :span="24">{{ item.senderName }}</el-col>
            <el-col :span="24">{{ item.message }}</el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { defineProps, ref } from 'vue';

import { defaultAvatar } from '@renderer/common/resource';

console.log('头像：', defaultAvatar);

const uiData = ref({
  defaultAvatar: defaultAvatar
});

const props = defineProps({
  messageList: Array<
    {
      senderId: string;
      receiverId: string;
      timestamp: number;
      message: string,
      senderName: string
    }
  >
});


</script>

<style>
.bg-hover:hover {
  background-color: #e9ecf0;
  cursor: pointer;
}
</style>
